<template>
  <div>
    <div class="app_card mb-2 pt-4 pb-4">
      <div class="d-flex justify-content-between align-items-center search-form">
        <div>
          <!-- <div style="width:calc(100% - 400px);">
            <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
              <el-tab-pane v-for="(item,index) in orderList" :label="item.title" :key="item.label" :name="item.label"></el-tab-pane>
            </el-tabs>
          </div> -->
          <el-radio-group class="radio_button" v-model="activeName" @change="handleClick">
            <el-radio-button v-for="(item,index) in orderList" :label="item.label" :key="item.label">{{item.title}}</el-radio-button>
          </el-radio-group>
        </div>
        <div class="t-r">
          <el-date-picker class="w120px mr-3" v-model="queryForm.timeNow" type="year" format="YYYY" placeholder="请选择" />
          <el-select class="w150px mr-3" v-model="queryForm.semester" @change="changeValue">
            <el-option v-for="item in TypeOptions" :key="item.name" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
          <el-select class="w150px mr-3" v-model="queryForm.semester1" @change="changeValue1" placeholder="选择时间">
            <el-option v-for="item in TypeOptions2" :key="item.name" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
          <el-button type="primary" @click="onRefresh()">查询</el-button>
        </div>
      </div>
    </div>
    <div class="app_card pt-4  pb-5">
      <!-- 刷卡最多教室 -->
      <div class="mytable" v-show="activeName=='first'">
        <el-table v-loading="loading" element-loading-text="查询中..." height="calc(100vh - 300px)" stripe size="large" :data="dataOfTable">
          <el-table-column label="教室编号" prop="ClassName" align="center" />
          <el-table-column label="刷卡次数" prop="UseCount" align="center" />
        </el-table>
      </div>
      <!-- 刷卡最少教室 -->
      <div class="mytable" v-show="activeName=='second'">
        <el-table v-loading="loading" element-loading-text="查询中..." height="calc(100vh - 300px)" stripe size="large" :data="dataOfTable">
          <el-table-column label="教室编号" prop="ClassName" align="center" />
          <el-table-column label="刷卡次数" prop="UseCount" align="center" />
        </el-table>
      </div>
      <!-- 刷卡次数最多个人 -->
      <div class="mytable" v-show="activeName=='third'">
        <el-table v-loading="loading" element-loading-text="查询中..." height="calc(100vh - 300px)" stripe size="large" :data="dataOfTable">
          <el-table-column label="名称" align="center" prop="TeacherName" />
          <el-table-column label="卡号" prop="CardId" align="center" />
          <el-table-column label="学院" align="center" prop="CollegeName" />
          <el-table-column label="刷卡次数" prop="UseCount" align="center" />
        </el-table>
      </div>
      <!-- 刷卡次数最少个人 -->
      <div class="mytable" v-show="activeName=='fourth'">
        <el-table v-loading="loading" element-loading-text="查询中..." height="calc(100vh - 300px)" stripe size="large" :data="dataOfTable">
          <el-table-column label="名称" align="center" prop="TeacherName" />
          <el-table-column label="卡号" prop="CardId" align="center" />
          <el-table-column label="学院" align="center" prop="CollegeName" />
          <el-table-column label="刷卡次数" prop="UseCount" align="center" />
        </el-table>
      </div>
      <!-- 学院刷卡排名 -->
      <div class="mytable" v-show="activeName=='fifth'">
        <el-table v-loading="loading" element-loading-text="查询中..." height="calc(100vh - 300px)" stripe size="large" :data="dataOfTable">
          <el-table-column label="学院名称" align="center" prop="CollegeName" />
          <el-table-column label="总刷卡次数" prop="UseCount" align="center" />
          <el-table-column label="排名" type="index" align="center" width="300px" />
        </el-table>
      </div>
      <!-- 使用最多教室 -->
      <div class="mytable" v-show="activeName=='sixth'">
        <el-table v-loading="loading" element-loading-text="查询中..." height="calc(100vh - 300px)" stripe size="large" :data="dataOfTable">
          <el-table-column label="教室名称" align="center" prop="ClassName" />
          <el-table-column label="使用时间(H)" prop="UseTime" align="center" />
        </el-table>
      </div>
      <div class="mytable" v-show="activeName=='seventh'">
        <el-table v-loading="loading" element-loading-text="查询中..." height="calc(100vh - 300px)" stripe size="large" :data="dataOfTable">
          <el-table-column label="教室名称" align="center" prop="ClassName" />
          <el-table-column label="使用时间(H)" prop="UseTime" align="center" />
        </el-table>
      </div>
      <Pagination ref="paginationRef" @handleChange="handleChange" />
    </div>
  </div>
</template>
  
<script setup>
/**
 * 角色组件
 */
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import { resetForm } from '@/utils/EsDate.js';
import { getNewObj } from '@/utils/EsCommon';

//组件
import Pagination from '@/components/pagination/index.vue';
import { roomTypeList } from '@/apis/model/RoomModel';
import { findValue } from '@/utils/EsCommon';
// ======================================================
//                      变量声明
// ======================================================
const loading = ref(false);
// 组件引用
const activeName = ref('first');
const paginationRef = ref(null);
// 表格数据
const roomTypeOption = ref(roomTypeList);
const dataOfTable = ref([]);
const dataOfTableList = ref([]);
var curDate = new Date();
// 表格查询参数
const queryForm = ref({
  timeNow: `${curDate.getFullYear()}`,
  semester: "春季",
  semester1: "",
  type: "room",
  order: 0,
})

let orderList = ref([
  { type: "room", order: 0, label: "first", title: '刷卡最多教室' },
  { type: "room", order: 1, label: "second", title: '刷卡最少教室' },
  { type: "teacher", order: 0, label: "third", title: '刷卡最多个人' },
  { type: "teacher", order: 1, label: "fourth", title: '刷卡最少个人' },
  { type: "college", order: 0, label: "fifth", title: '学院刷卡排名' },
  { type: "", order: 0, label: "sixth", title: '使用最多教室' },
  { type: "", order: 1, label: "seventh", title: '使用最少教室' },
])


const TypeOptions = ref([
  { name: "全部", value: "全部" },
  { name: "春季", value: "春季" },
  { name: "夏季", value: "夏季" },
  { name: "秋季", value: "秋季" },
  { name: "冬季", value: "冬季" },
])
const TypeOptions2 = ref([])
for (let index = 1; index < 13; index++) {
  TypeOptions2.value.push({ name: index + "月", value: index })
}
// 表格多选数据
// 表格查询参数
const queryParam = ref({
  limit: 10,
  page: 1,
})
// 处理分页尺寸
const handleChange = (data = null) => {
  queryParam.value.page = data?.page;
  queryParam.value.limit = data?.limit;
  loadData()
}

// ======================================================
//                      处理事件
// ======================================================

// 点击快速搜索按钮
const onRefresh = () => {
  if (queryForm.value.timeNow) {
    queryForm.value.timeNow = resetForm('YYYY', queryForm.value.timeNow)
  } else {
    queryForm.value.timeNow = `${curDate.getFullYear()}`
  }
  queryParam.value.page = 1
  dataOfTable.value = []
  dataOfTableList.value = []
  loading.value = false
  if (['first', 'second', 'third', 'fourth', 'fifth'].includes(activeName.value)) {
    getCardList();
  } else if (['sixth', 'seventh'].includes(activeName.value)) {
    getList()
  }
}

const changeValue = () => {
  queryForm.value.semester1 = "";
  onRefresh()

}
const changeValue1 = () => {
  queryForm.value.semester = "";
  onRefresh()
}
const handleClick = () => {
  let obj = orderList.value.find(item => item.label == activeName.value)
  if (obj) {
    queryForm.value.type = obj.type;
    queryForm.value.order = obj.order;
    onRefresh()
  }
}

const loadData = () => {
  let list = []
  let { page, limit } = queryParam.value
  // if(totalPage===1){
  //   // 只有一页的情况
  //   showLists=allLists
  // }else{
  //   // 不止一页的情况 获取当前页数据
  //   showLists = allLists.slice((currentPage-1)*pageSize,currentPage*pageSize)
  // }
  list = dataOfTableList.value.slice((page - 1) * limit, page * limit)
  dataOfTable.value = getNewObj(list)
}


const getList = (order) => {
  let query = `?order=${queryForm.value.order}&time=${queryForm.value.timeNow}&semester=`
  if (queryForm.value.semester) {
    query += `${queryForm.value.semester}`
  } else {
    query += `${queryForm.value.semester1}`
  }
  loading.value = true
  EsAjax.post(`${ApiUrls.logUsetimetable}${query}`, {}).then(res => {
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data + res.data.msg);
      return;
    }
    if (res.data.data && res.data.data.length) {
      res.data.data.forEach((item) => {
        item.UseTime = (item.UseTime / 3600).toFixed(2);
      });
      dataOfTableList.value = getNewObj(res.data.data)
      paginationRef.value?.changeTotal({ totalCount: dataOfTableList.value.length })
      loadData()
    }
  }).catch(err => {
    ElMessage.error(err.message);
  }).finally(() => {
    loading.value = false

  })

}
const getCardList = () => {
  let query = `?order=${queryForm.value.order}&type=${queryForm.value.type}&time=${queryForm.value.timeNow}&semester=`
  if (queryForm.value.semester) {
    query += `${queryForm.value.semester}`
  } else {
    query += `${queryForm.value.semester1}`
  }
  loading.value = true
  EsAjax.post(`${ApiUrls.logSwipcardtable}${query}`, {}).then(res => {
    if (res.data.code != 200) {
      ElMessage.warning(res.data.data + res.data.msg);
      return;
    }
    if (res.data.data && res.data.data.length) {
      dataOfTableList.value = getNewObj(res.data.data)
      paginationRef.value?.changeTotal({ totalCount: dataOfTableList.value.length })
      loadData()
    }
  }).catch(err => {
    ElMessage.error(err.message);
  }).finally(() => {
    loading.value = false
  })
}
getCardList();
</script>
  
<style scoped lang="less">
::v-deep(.el-tabs--border-card > .el-tabs__header) {
  background: transparent;
  border-bottom: none;
}
::v-deep(.el-tabs--border-card) {
  border: none;
}
::v-deep(.el-tabs--border-card) {
  background: transparent;
}
::v-deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item) {
  border-radius: 10px;
}

::v-deep(.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active) {
  background-color: transparent;
  background: #0db895;
  color: #fff;
  border: none;
  border-radius: 10px;
}
::v-deep(.el-tabs__content) {
  display: none;
}
::v-deep(
    .el-tabs--border-card > .el-tabs__header .el-tabs__item + .el-tabs__item
  ) {
  margin-left: -10px;
}
</style>